<template>
  <view class="resume-subPage min-h-100vh flex flex-col">
    <custom-navbar
      title="实习经历"
      :auto-back="true"
      left-icon-color="#303133"
    />
    <view class="min-w-0 flex flex-auto bg-#ffffff">
      <view class="w-25% flex flex-col bg-#f6f6f6 pl-30rpx pr-15rpx">
        <view
          v-for="(item, index) in list1"
          :key="index"
          class="mb-28rpx w-full py-34rpx text-[24rpx] text-[#1d2129] font-bold leading-[34rpx]"
          :class="{ 'color-#1F50F2': activeIndex1 === index }"
          @tap="tapIndex(1, index)"
        >
          <text class="break-all">
            {{ item.name }}
          </text>
        </view>
      </view>
      <view
        class="w-25% flex flex-col b-r-1rpx b-r-#f6f6f6 b-r-solid pl-30rpx pr-15rpx"
      >
        <view
          v-for="(item, index) in list2"
          :key="index"
          class="mb-28rpx w-full py-34rpx text-[24rpx] text-[#1d2129] font-bold leading-[34rpx]"
          :class="{ 'color-#1F50F2': activeIndex2 === index }"
          @tap="tapIndex(2, index)"
        >
          <text class="break-all">
            {{ item.name }}
          </text>
        </view>
      </view>
      <view
        class="w-25% flex flex-col b-r-1rpx b-r-#f6f6f6 b-r-solid pl-30rpx pr-15rpx"
      >
        <view
          v-for="(item, index) in list3"
          :key="index"
          class="mb-28rpx w-full flex items-center justify-between py-34rpx text-[24rpx] text-[#1d2129] font-bold leading-[34rpx]"
          :class="{ 'color-#1F50F2': activeIndex3 === index }"
          @tap="tapIndex(3, index)"
        >
          <text class="break-all">
            {{ item.name }}
          </text>
          <up-icon
            v-if="activeIndex3 === index"
            name="play-right-fill"
            color="#1f50f2"
            size="24rpx"
          />
        </view>
      </view>
      <view class="w-25% flex flex-col pl-30rpx pr-20rpx">
        <view
          v-for="(item, index) in list4"
          :key="index"
          class="mb-28rpx w-full flex items-center justify-between py-34rpx text-[24rpx] text-[#1d2129] font-400 leading-[34rpx]"
          :class="{ 'color-#1F50F2': activeIndex4 === index }"
          @tap="tapIndex(4, index)"
        >
          <text class="break-all">
            {{ item.name }}
          </text>
          <up-icon
            v-if="activeIndex4 === index"
            name="checkbox-mark"
            color="#1f50f2"
            size="24rpx"
          />
        </view>
      </view>
    </view>
    <view
      class="w-100% flex items-center justify-between bg-#fff px-24rpx pt-24rpx pb-safe"
    >
      <up-button
        :custom-style="{
          background: '#f3f4fa',
          color: '#1D2129',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }"
        shape="circle"
        text="删除"
      />
      <up-button
        :custom-style="{
          background: '#1f50f2',
          color: '#fff',
          width: '338rpx',
          height: '82rpx',
          fontSize: '30rpx',
        }"
        @click="onClickSubmit"
        shape="circle"
        text="确定"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import {resumeSkillList, resumeTypeList} from "@/api/user";
import {ResumeUpdateParams, customerResumeUpdate} from "@/api/user/customer"
import {otherStore, useUserStore} from "@/store";

const skills = ref([]);

const activeIndex1 = ref(0);
const activeIndex2 = ref(0);
const activeIndex3 = ref(0);
const activeIndex4 = ref(0);

const list1 = computed(() => skills.value);
const list2 = ref([])
const list3 = ref([])
const list4 = ref([])

const tapIndex = (type: number, index: number) => {
  switch (type) {
    case 1:
      activeIndex1.value = index;
      activeIndex2.value = 0;
      activeIndex3.value = 0;
      activeIndex4.value = 0;
      break;
    case 2:
      activeIndex2.value = index;
      activeIndex3.value = 0;
      activeIndex4.value = 0;
      break;
    case 3:
      activeIndex3.value = index;
      activeIndex4.value = 0;
      break;
    case 4:
      activeIndex4.value = index;
      break;

    default:
      break;
  }
  getResumeSkillList()
};
const resumeId = ref(0)
// 获取一级列表
const getResumeSkillList = () => {
  resumeTypeList({type_id: 1, pid: 0}).then(res => {
    console.log('--------', res)
    if(res) {
      skills.value = res
      getSecond(res[0])
    }
  })
}
// 获取二级列表
const getSecond = (value) => {
  list3.value = []
  list4.value = []
  activeIndex3.value = 0
  activeIndex4.value = 0
  resumeSkillList({
    type_id: value.id,
    //pid: value.pid ? value.pid : 0
  }).then(res => {
    skills.value.map(v => {
      if(v.id === res[0].type_id) {
        v.children = res
      }
    })
    console.log('skills', skills.value[activeIndex1.value], skills.value[activeIndex1.value].children)
    list2.value = skills.value[activeIndex1.value].children
    if(list2.value.length > 0) list3.value = list2.value[activeIndex2.value].children
    if(list3.value.length > 0) list4.value = list3.value[activeIndex3.value].children
  })
}

const onClickSubmit = async () => {
  console.log('简历ID：：：', resumeId.value)
  otherStore().setSkillCertificate([list1.value[activeIndex1.value], list2.value[activeIndex2.value], list3.value[activeIndex3.value], list4.value[activeIndex4.value]])
  if (resumeId.value == 0) {
    uni.showToast({
      title: '简历异常',
      icon: 'none'
    })
    return
  }
  let skillList = [list1.value[activeIndex1.value].id, list2.value[activeIndex2.value].id, list3.value[activeIndex3.value].id, list4.value[activeIndex4.value].id]
  let params:ResumeUpdateParams = {
    id: resumeId.value,
    skill_certificate_content: JSON.stringify(skillList)
  }
  console.log('参数：：：', params)
  let r = await customerResumeUpdate(params)
  if (r) {
    uni.redirectTo({
      url: '/pages/userinfo/resume-create?resume_id=' + resumeId.value
    })
  }
  console.log('技能证书 skills:::', otherStore().$state.cer)
  console.log('技能证书 activeIndex1:::', activeIndex1.value)
  console.log('技能证书 activeIndex2:::', activeIndex2.value)
  console.log('技能证书 activeIndex3:::', activeIndex3.value)
  console.log('技能证书 activeIndex4:::', activeIndex4.value)
  // console.log('技能证书 list1:::', list1)
  // console.log('技能证书 list2:::', list2)
  // console.log('技能证书 list3:::', list3)
  // console.log('技能证书 list4:::', list4)
}
const onClickCancle = async () => {
  uni.navigateBack()
}
onMounted(() => {
  getResumeSkillList()
})

onLoad((query:any) => {
  console.log('技能证书页获取简历ID', query.resume_id)
  resumeId.value = query.resume_id
})
</script>

<style lang="scss" scoped>

</style>
